<template>
  <div class="amusement-container">
<!--    <div style="width: 500px;height: 500px;margin: 0 auto">-->
<!--      <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=0&id=2522473216&auto=0&height=430"></iframe>-->
<!--    </div>-->
    <div class="amusement-box">
      <el-card class="card">
        <p>从来没有真正的绝境，只有心灵的迷途</p>
        <div class="music-title">
          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602482712629&di=2b33b4331317c5ab95dae38dee9c70ac&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F00%2F93%2F51%2F1656f2a15a20359.jpg" alt="">
          <span>MUSIC</span>
        </div>
        <div class="music-list">
          <iframe class="music" frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="//music.163.com/outchain/player?type=0&id=2522473216&auto=0&height=430"></iframe>
        </div>
        <div class="musicMV-title">
          音乐 MV，带给你不一样的体验
        </div>
        <div class="video-box">
          1. 《Dream It Possible》
          <div class="videoTitle2">
            选用官方高清素材，含Delacey唱的国际英文版（时长不同的两版MV和现场版）以及张靓颖唱的中文版《我的梦》。
          </div>
          <div>
            <iframe class="video" src="//player.bilibili.com/player.html?aid=48803444&bvid=BV16b411T7JV&cid=85548037&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
          </div>
        </div>
        <div class="video-box">
          2. 《姜子牙》片尾曲
          <div class="videoTitle2">
            周深演唱《姜子牙》片尾曲MV发布啦
          </div>
          <div>
            <iframe class="video" src="//player.bilibili.com/player.html?aid=83422028&bvid=BV1wJ411J7DV&cid=142715113&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
          </div>
        </div>
        <div class="video-box">
          3. 《打上花火》
          <div class="videoTitle2">
            看过片的老宅男说“这简直就是小宅男一场近乎完美的春梦啊！”
          </div>
          <div>
            <iframe class="video" src="//player.bilibili.com/player.html?aid=16605939&bvid=BV1Sx411V7jS&cid=27086345&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
          </div>
        </div>

        <div class="video-box">
          4. 《天气之子》×《你的名字》
          <div class="videoTitle2">
            无论你在世界的什么地方，我一定会再去见你
          </div>
          <div>
            <iframe class="video" src="//player.bilibili.com/player.html?aid=74143275&bvid=BV18E411875M&cid=126839352&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
          </div>
        </div>
        <div class="videoTitle1">
          <div class="title1-blue"></div>
          <span class="title1-i">i</span>
          <div class="title1-text">
            有时候我们过去了总会感怀，身处当下，我们总觉得我们过去如何，殊不知走入循环，未来的我们还会感慨现在。小时候总是很奇怪大人为什么会有遗憾，到了这个心思繁杂的年龄才能真正体会孤独，深夜里阴天下一个人内心而来的悲伤。遗憾必会存在，感慨遗憾的同时，也请继续加油，假如你的眼前有影子，说明身后有光。萍水相逢，祝愿看到这里的人都能未来可期。
          </div>
        </div>
        <div class="video-box">
          1. 小时候，夏天，夜晚，平顶房，北极星，烟火，虫鸣，微风，细雨
          <div class="videoTitle2">
            小时候总想长大，长大后才明白童年无知是多么享受。当身处未来，回头回忆时，明白那多么珍贵。当你觉得事事平常时，来回体会，明白那也别有一番滋味。看似平凡，可那是自己的独一无二。用心体会平常，“平凡世界”。
          </div>
          <div>
            <iframe class="video" src="//player.bilibili.com/player.html?aid=370349146&bvid=BV1AZ4y14712&cid=179898156&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
          </div>
        </div>
        <div class="video-box">
          2. 「像狗哥这样的人，会不会有人心疼」
          <div class="videoTitle2">
            人人都笑狗哥这样的人，但不知道大部分都是狗哥这样的人
          </div>
          <div>
            <iframe class="video"  src="//player.bilibili.com/player.html?aid=542250123&bvid=BV1Wi4y1E78v&cid=241944068&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
          </div>
        </div>
        <div class="video-box">
          3. “躲了雨一辈子，不知道雨会不会难过”
          <div>
            <iframe class="video"  src="//player.bilibili.com/player.html?aid=243740261&bvid=BV1Av411z7Em&cid=208620126&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
          </div>
        </div>
        <div class="video-box">
          4.一个人的时候，看看这个吧
          <div class="videoTitle2">
            喜欢一个人的生活但又不喜欢一个人的生活。
          </div>
          <div>
            <iframe class="video" src="//player.bilibili.com/player.html?aid=667835140&bvid=BV1da4y1x7RV&cid=179871860&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
          </div>
        </div>
        <div class="video-box">
          5.有一种夏天叫宫崎骏的夏天
          <div class="videoTitle2">
            在宫崎骏的世界里，总有一片澄明的夏天
          </div>
          <div>
            <iframe class="video" src="//player.bilibili.com/player.html?aid=98690384&bvid=BV1k7411m7Jf&cid=168454964&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
          </div>
        </div>
      </el-card>
    </div>
    <e-bottom></e-bottom>

  </div>
</template>

<script>
import bottom from "@/components/bottom";
export default {
  data () {
    return{

    }
  },
  components: {
    eBottom: bottom
  }

}
</script>

<style lang="less" scoped>
.amusement-container{
  .amusement-box{
    width: 65%;
    margin: 40px auto;
    .card{
      width: 100%;
      p{
        text-align: center;
        font-size: 16px;
        color: #85929E;
        margin-bottom: 30px;
      }
      .music-title{
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          width: 30px;
          height: 30px;
          margin-right: 1.5%;
        }
        span{
          font-size: 40px;
        }
      }
      .music-list{
        width: 50%;
        margin: 20px auto;
        .music{
          width: 100%;
        }
      }
      .videoTitle1{
        position: relative;
        width: 60%;
        margin: 50px auto;
        background-color: #EEF7FA;
        font-size: 16px;
        padding: 10px 0;
        .title1-blue{
          position: absolute;
          left: 0;
          width: 2px;
          height: 100%;
          background-color: #428BCA;
          transform: translateY(-10px);
        }
        .title1-i{
          background-color: #428BCA;
          position: absolute;
          left: 15px;
          display: inline-block;
          width: 20px;
          height: 20px;
          line-height: 20px;
          border-radius: 50%;
          text-align: center;
          color: white;
          font-size: 20px;
        }
        .title1-text{
          margin: 0px 30px 0px 50px;
          color: #73819F;
        }
      }
    .video-box{
      width: 90%;
      margin: 0 auto;
      font-size: 20px;
      font-weight: bold;
      .videoTitle2{
        width: 75%;
        font-weight: normal;
        font-size: 16px;
        margin: 10px 0;
      }
      .video{
        width: 100%;
        height: 600px;
        margin: 15px 0;
      }
    }
      .musicMV-title{
        text-align: center;
        font-size: 30px;
        margin: 30px 0;
      }
    }
  }
  @media (min-width: 992px) and (max-width: 1300px) {
    .amusement-box {
      width: 70%;
      .card{
        .video-box{
          width: 100%;
        }
        .music-list{
          width: 50%;
          margin: 20px auto;
          .music{
            width: 100%;
          }
        }
      }
    }

  }
  @media (min-width: 768px) and (max-width: 991px) {
    .amusement-box {
      width: 95%;
      .card {
        .videoTitle1{
          width: 100%;
        }
        .video-box {
          width: 100%;
          .video {
            height: 350px !important;
          }
        }
      }
    }

  }
  @media (max-width: 767px) {
    .amusement-box {
      width: 95%;

      .card {
        .videoTitle1{
          width: 100%;
        }
        .video-box {
          width: 100%;

          .video {
            height: 250px !important;
          }
        }

        .music-list {
          width: 100%;
          margin: 20px auto;

          .music {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
